<script setup>
// 管理出勤
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { setupChartAnimation } from '@/utils/animation'
onMounted(() => {
  const myChart = echarts.init(document.querySelector('.footbox3'))
  const option = {
    backgroundColor: '#080b30',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(0, 255, 233,0)'
            }, {
              offset: 0.5,
              color: 'rgba(255, 255, 255,1)'
            }, {
              offset: 1,
              color: 'rgba(0, 255, 233,0)'
            }],
            global: false
          }
        }
      }
    },
    grid: {
      top: '20%',
      left: '2%',
      right: '5%',
      bottom: '2%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      axisLine: {
        show: true
      },
      splitArea: {
        // show: true,
        color: '#f00',
        lineStyle: {
          color: '#7c7d81'
        }
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          color: '#7c7d81'
        }
      },
      splitLine: {
        show: false
      },
      // boundaryGap: false,
      boundaryGap: ['5%', '0%'],  // 向右平移
      data: ['2024-06-10', '2024-06-11', '2024-06-12', '2024-06-13', '2024-06-14', '2024-06-15', '2024-06-16', '2024-06-16']

    }],

    yAxis: [{
      type: 'value',
      name: '(人数：人)',
      min: 0,
      // max: 140,
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#454d60',
          // opacity: 0.06,
          type: 'dashed'
        }
      },
      axisLine: {
        show: true
      },
      axisLabel: {
        show: true,
        margin: 20,
        textStyle: {
          color: '#7c7d81'
        }
      },
      axisTick: {
        show: false
      }
    }],
    series: [{
      name: '注册总量',
      type: 'line',
      smooth: true, //是否平滑
      lineStyle: {
        normal: {
          color: '#fcba3a' // 折线颜色
        }
      },
      showAllSymbol: true,
      itemStyle: {
        color: '#fec93e',
        borderColor: '#fec93e'
      },
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#fec93e',
          fontSize: 14
        }
      },
      tooltip: {
        show: false
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(252, 186, 58, 0.4)'
            },
            {
              offset: 1,
              color: 'rgba(252, 186, 58, 0)'
            }
          ],
          global: false // 缺省为 false
        }
      },
      data: [14, 12, 10, 8, 12, 16, 12, 18]
    }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
  setupChartAnimation(myChart)
})
</script>

<template>
  <div class="footbox3"></div>
</template>

<style lang="scss" scoped>
.footbox3 {
  width: vw(900px);
  height: vh(212px);
}
</style>